<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-sclae=1.0,user-scalable=0">
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<script type="text/javascript" src="js/h5.min.js"></script>
	<title>xuluo</title>
	<style>
		/* loading动画 */
		.loading{position:fixed;width:100%;height:100%;z-index:1000;}
		.loading .wrap{position:absolute;left:0;right:0;bottom:0;top:0;margin:auto;width:150px;max-height:140px;text-align:center;background:rgba(0,0,0,0.5);color:#fff;border-radius:4px;font-size:15px;}
		.loading .loader{position:relative;width:60px;height:60px;border-radius:50%;box-sizing:border-box;display:inline-block;vertical-align:middle;margin:20px 0 20px 0;border:7px double #fff;-webkit-animation:rotate 1s linear infinite;animation:rotate 1s linear infinite;}
		.loading .loader:before,.loading .loader:after{content:"";position:absolute;width:12px;height:12px;background:#fff;border-radius:50%;bottom:0;right:37px;}
		.loading .loader:after{left:37px;top:0;}
		@-webkit-keyframes rotate{
			0%{-webkit-transform:rotate(0deg);transform:rotate(0deg);}
			100%{-webkit-transform:rotate(360deg);transform:rotate(360deg);}
		}
		@keyframes rotate{
			0%{transform:rotate(0deg);}
			100%{transform:rotate(360deg);}
		}
	</style>
</head>
<body>
	<script type="text/javascript">
		// loading动画
		var loading=function(cls){
		    var loading=$('<div>');
		    loading.addClass('loading');
		    var txt='<div class="wrap"><div class="loader"></div><p>正在加载中...</p></div>';
		    loading.html(txt);
		    $('body').append(loading);
		};
		loading();
		setTimeout(function(){
			$('.loading').remove();
		},3000);
	</script>
</body>
</html>